(function () {
  let titleId = 0;
  let num = 0,
    time = 0,
    sum = 82,
    ids;
  init();
  function init() {
    getTitleData();
    getData(titleId); //titleId 初始值为0
    $("#nav>.navList").on("click", "li", clickHandler); //设置点击事件，点击li变更titleId值
    $("#top").click(clickTop); //返回顶部
  }
  function getTitleData() {
    //获取标题信息，根据数据创建标题
    $.ajax({
      url: "http://chst.vip:1234/api/getbaicaijiatitle",
    }).then((res) => {
      createTitleLi(res.result);
    });
  }
  function createTitleLi(data) {
    //创建标题
    let html = data.reduce((value, item) => {
      //给li设置titleId 以供点击事件获取titleId
      return (value += `
                <li titleId=${item.titleId}>${item.title}</li>
            `);
    }, "");
    //动态创建标题容器的宽度
    $("#nav>.navList")
      .css({ width: data.length * 1.87 + "rem" })
      .html(html);
  }
  function getData(titleId) {
    //获取内容数据
    $.ajax({
      url: "http://chst.vip:1234/api/getbaicaijiaproduct?",
      data: {
        titleid: titleId,
      },
    }).then((res) => {
      createContent(res.result);
    });
  }
  function createContent(data) {
    //根据数据创建商品内容
    let html = data.reduce((value, item) => {
      return (value += `
                <li>
                    <div class="left">
                        ${item.productImg}
                    </div>
                    <div class="right">
                        <h3>${item.productName}</h3>
                        <div class="price">${item.productPrice}</div>
                        <div class="animation">${item.productCouponRemain}</div>
                        <div class="click">
                            ${item.productCoupon}
                            ${item.productHref}
                        </div>
                    </div>
                </li>
            `);
    }, "");
    $("#main>.list").html(html);
    ids = setInterval(animation, 50); //进度条定时器
  }
  function clickHandler() {
    clearInterval(ids); //点击时清楚进度条定时器;
    titleId = $(this).attr("titleId");
    $(this).css({ color: "red" }).siblings().css({ color: "black" });
    //点击的时候重置。
    num = 0;
    sum = 82;
    time = 0;
    //传入titleId 调用ajax获取对应数据
    getData(titleId);
  }
  function animation() {
    //进度条
    time++;
    num += 82 / 100;
    sum -= 82 / 100;
    if (time > 100) {
      clearInterval(ids); //清楚进度条定时器;
      return;
    }
    $("#main .list .right .animation span")
      .text(`${time}%`)
      .css({ backgroundColor: "orange" });
    Array.from(
      document.querySelectorAll("#main .list .right .animation span")
    ).forEach((item) => {
      item.style.width = `${time}%`;
    });
    $("#main .list .right .animation b").text(
      `已领取${Math.ceil(num)}张/剩余${Math.floor(sum)}张`
    );
  }
  function clickTop() {
    $("html").stop().animate(
      {
        scrollTop: 0,
      },
      200
    );
  }
})();
